import React, { useState } from 'react'
import {
  Form,
  Input,
  Button,
  Radio
} from 'antd-mobile'
import imag from '../../img/imag.png'
import imag1 from '../../img/image.png'
import styles from './login.module.css'

function Index() {

  const [sao, setSao] = useState(true)

  const onFinish = (values) => {

  }
  return (
    <div>
      <Form
        layout='horizontal'
        onFinish={onFinish}
      // footer={
      //   
      // }
      >
        <Form.Header>账号密码登录 <span style={{ marginLeft: '150px' }} onClick={() => setSao(false)}>扫码登录</span> </Form.Header>
        {
          sao ? <div>
            <h3>账号密码登录</h3>
            <Form.Item
              name='username'
              label='用户名'
              rules={[{ required: true, message: '用户名不能为空' }]}
            >
              <Input onChange={console.log} placeholder='请输入用户名' />
            </Form.Item>
            <Form.Item
              name='password'
              label='密码'
              rules={[{ required: true, message: '密码不能为空' }]}
            >
              <Input onChange={console.log} placeholder='请输入密码' />
            </Form.Item>
            <Button block type='submit' color='warning' size='large'>
              登录
            </Button>
            <Radio style={{marginTop:'20px'}}>阅读并同意携程的 <span style={{color:'blue'}}>服务协议</span>和<span style={{color:'blue'}}>个人信息保护政策</span> </Radio>
            <p className={styles.sj}>
              <span>验证码登录</span>
              <span>免费注册</span>
            </p>
            <p className={styles.jing}>
              <span>境外手机</span>
              <span>|</span>
              <span>公司客户</span>
              <span>|</span>
              <span>携程通</span>
            </p>
            <img src={imag1} style={{width:'50%'}} />
          </div> : <div>
            <h3>扫码登录</h3>
            <img src={imag} alt="" style={{ width: '100%' }} />
            <p>打开 <span style={{ color: 'blue' }}>携程APP</span>扫描二维码登录 </p>
            <Button onClick={() => setSao(true)}>返回账号登录</Button>
          </div>
        }
      </Form>
    </div>
  )
}

export default Index
